<template lang="">
  <a-layout>
    <a-layout-header style="padding-left: 20px"
      ><span style="color: rgb(118, 115, 115)">管理员信息</span>/权限列表
    </a-layout-header>
    <a-layout style="padding: 0 24px">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>权限列表</a-breadcrumb-item>
      </a-breadcrumb>
      <div
        style="
          background-color: white;
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div style="margin-left: 40px">
          <span style="font-size: 20px">名字:</span>
          <a-input :style="{ width: '320px' }" placeholder="请输入" v-model="shuru" allow-clear />
        </div>
        <div style="margin-right: 40px">
          <a-button @click="chong">重置</a-button>
          <a-button style="margin-left: 20px" type="primary" @click="chaxun">查询</a-button>
        </div>
      </div>
      <a-table :data="tableData" style="margin-top: 30px">
        <div
          style="
            width: 100%;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span style="margin-left: 40px">管理员列表</span>
          <a-button style="margin-right: 40px" @click="handleClick" type="primary">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新建</template>
          </a-button>
          <template>
            <a-modal v-model:visible="visible" @ok="handleOk">
              <template #title>新建</template>
              <div>
                <a-form :style="{ width: '328px' }">
                  <p>名字</p>
                  <a-input style="height: 31px" placeholder="请输入名字" v-model="ming" />
                  <p>简介</p>
                  <a-input style="height: 75px" placeholder="请输入简介" v-model="jianjie" />
                </a-form>
              </div>
            </a-modal>
          </template>
          <template>
            <a-modal v-model:visible="edit" @ok="editOk">
              <template #title>编辑</template>
              <div>
                <a-form :style="{ width: '328px' }">
                  <p>名字</p>
                  <a-input style="height: 31px" placeholder="请输入名字" v-model="name" />
                  <p>简介</p>
                  <a-input style="height: 75px" placeholder="请输入简介" v-model="desc" />
                </a-form>
              </div>
            </a-modal>
          </template>
        </div>
        <a-table :columns="columns" :data="tableData">
          <template #index="{ rowIndex }">
            <span>{{ rowIndex + 1 }}</span>
          </template>
          <template #cell="{ record }">
            <a-button style="margin-right: 10px" type="primary" @click="editClick(record)">
              <template #icon>
                <icon-edit />
              </template>
            </a-button>
            <a-button type="primary" status="danger">
              <template #icon>
                <icon-delete @click="deleteClick(record.id)" />
              </template>
            </a-button>
          </template>
        </a-table>
      </a-table>
      <a-layout-footer>十三区</a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import { IconPlus, IconDelete } from '@arco-design/web-vue/es/icon'
import { permissionAPI, addPermission, delPermission, xiuPermission } from '@/api/yang'
export default {
  components: { IconPlus, IconDelete },
  data() {
    return {
      id: '',
      edit: false,
      visible: false,
      tableData: [],
      desc: '',
      name: '',
      roleId: '',
      permissionId: '',
      columns: [
        {
          title: '序号',
          slotName: 'index',
          align: 'center'
        },
        {
          title: '名字',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '描述',
          dataIndex: 'desc',
          align: 'center'
        },
        {
          title: '操作',
          slotName: 'cell',
          align: 'center'
        }
      ]
    }
  },
  methods: {
    //页面打开获取权限信息
    getUserInfo() {
      permissionAPI().then((res) => {
        console.log(res)
        this.tableData = res.data.list.map((item) => ({
          ...item
        }))
      })
    },
    //新增数据
    handleOk() {
      addPermission({ name: this.ming, desc: this.jianjie }).then((res) => {
        console.log(res)
        this.getUserInfo()
      })
    },
    //删除数据
    deleteClick(id) {
      console.log(id)
      delPermission(id).then((res) => {
        console.log(res)
        this.getUserInfo()
      })
    },
    //点新建出框
    handleClick() {
      this.visible = true
    },
    //点击编辑框
    editClick(id) {
      this.edit = true
      this.name = id.name
      this.desc = id.desc
      this.id = id.id
    },

    //修改的确认键
    editOk() {
      console.log(this.id)
      xiuPermission(this.id, {
        name: this.name,
        desc: this.desc
      }).then((res) => {
        console.log(res)
        this.getUserInfo()
      })
    }
  },
  mounted() {
    this.getUserInfo()
  }
}
</script>
<style scoped lang="css">
.nav {
  width: 100%;
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(179, 176, 176, 0.464);
}
</style>
